<template>
	<div class="gobang-invite" v-show="dialogConfimVisible">
		<el-dialog v-model="dialogConfimVisible" title="邀请信息" width="300px" height="300px">
		    <div class="gobang-invite-list">
				<div class="gobang-invite-list-group" v-for="(item,index) in data.inviteData">
					<p>{{item.gameName}}</p>
					<span><img :src="item.avatar?item.avatar:''" @error="(e)=>{e.target.src = require('../../assets/image/defalut.png')}" /></span>
					<strong>{{item.nickName}}</strong>
					<button @click="confimButtonClick(item,index,1)">同意</button>
					<button @click="confimButtonClick(item,index,0)">拒绝</button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive,inject,onBeforeUnmount  } from 'vue'
	import { ElMessage} from 'element-plus'
	import { useRouter,useRoute } from 'vue-router'
	import bus from '../../public/bus'
	import { sendMessage } from "../main/webServer"
	import {HttpGetOtherinfo,HttpSeachGameRoom} from '../../public/http'
	const store = inject('store')
	const router = useRouter();
	const route = useRoute();
	let dialogConfimVisible = ref<boolean>(false)
	let data = reactive({
		inviteData:[]
	})
	// 监听值
	bus.on('inviteInfo',(value:any)=>{
		let info = JSON.parse(value)
		if(info.to == store.state.userInfoX.account){
			if(info.infoType == 'invite'){
				// 邀请信息接收
				data.inviteData.unshift(info)
				dialogConfimVisible.value = true
			}
		}
		
	})
	// 同意进入房间
	const confimButtonClick = async (item,index,type)=>{
		if(type){
			let result = await HttpGetOtherinfo({email:item.from})
			if(result?.data?.is_line === 2){
				ElMessage({
					message: "对方已在游戏中...",
					type: 'warning',
				})
				return
			}else if(result?.data?.is_line === 3){
				ElMessage({
					message: "对方已离线！",
					type: 'warning',
				})
				return
			}
			if(item.roomId){
				let roomResult = await HttpSeachGameRoom({id:item.roomId})
				let num = 0
				roomResult?.data.forEach((r)=>{
					if(!r){
						++num
					}
				})
				if(roomResult.data&&(roomResult.data.length - num) === 3){
					ElMessage({
						message: "房间人数已满",
						type: 'warning',
					})
					return
				}
			}
			
			if(!item?.gameUrl){
				return
			}
			bus.emit('isOtherRoom')
			dialogConfimVisible.value = false
			store.commit('battleInfoMain',item)
			data.inviteData = []
			if(item?.gameUrl.indexOf('gobang') > -1){
				
				if(route.path.indexOf('gobang') > -1){
					bus.emit('startGame')
				}else{
					router.push(item.gameUrl)
				}
			}else{
				if(route.path.indexOf(item.gameUrl) > -1 && route.path.indexOf('gobang') === -1){
					bus.emit('agreeMessage')
				}else{
					router.push(item.gameUrl)
				}
			}
		}else{
			let info = {
				infoType:'refuse',//拒绝信息
				to:item.from,
			}
			let result = sendMessage(info)
			if(result){
				data.inviteData.splice(index,1)
				if(data.inviteData.length == 0){
					dialogConfimVisible.value = false
				}
			}
		}
		
	}
	onBeforeUnmount(()=>{
		bus.off('info')
	})
</script>

<style lang="scss" scoped="scoped">
	.gobang-invite{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		:deep(.el-dialog__body){
			padding: 10px 20px 15px 20px;
		}
		.gobang-invite-seach{
			margin-bottom: 10px;
		}
		.gobang-invite-list{
			height: 300px;
			overflow: auto;
			.gobang-invite-list-bottom{
				font-size: 13px;
				color: #aaa;
				text-align: center;
				padding: 10px;
			}
			.gobang-invite-list-group{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 5px;
				border-bottom: 1px solid #eee;
				padding: 10px 0;
				position: relative;
				p{
					position: absolute;
					right: 0;
					bottom: -8px;
					font-size: 12px;
					opacity: 0.3;
					margin: auto;
					text-align: center;
					background-color: white;
				}
				span{
					display: inline-block;
					width: 20px;
					height: 20px;
					border-radius: 60%;
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				strong{
					font-size: 14px;
					color: #000000;
					margin: 0 20px 0 3px;
					width: calc(100% - 140px);
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					
				}
				button{
					padding: 3px 5px;
					font-size: 12px;
					background-color: rgb(249, 171, 8);
					color: white;
					border-radius: 5px;
					border: 0;
					cursor: pointer;
					margin-left: 5px;
					outline: none;
					&:nth-of-type(2){
						background-color: red;
					}
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		
	}
</style>
